<template>
  <breadcrumbNavigation v-if="props.title" :title="props.title" :showAddIcon="false" :showRightIcon="false" :spanBgcolor="props.titleSpanBgColor"></breadcrumbNavigation>
  <ul>
    <li class="content"  v-for="(item,index) in props.content" @click="handleClick(item)">
      <div class="content-detail" :style="{paddingBottom: (showMark&&!showBottom?'0px':'10px')}">
        <!-- 左边文字区域 -->
        <div class="content-left">

          <!-- 标题最多显示两行 -->
          <p class="content-title" :class="titleLine== 1? 'multi-ellipsis--l1': 'multi-ellipsis--l2'" v-text="item.articleTitle"></p>

          <!-- 内容最多显示三行 -->
          <p class="content-text" :class="contentLine== 1? 'multi-ellipsis--l1': contentLine== 2? 'multi-ellipsis--l2':'van-multi-ellipsis--l3'" v-text="item.articleContent"></p>

          <!-- 标签位置 -->
          <div v-if="showTags">
            <van-tag type="warning" round color="#dededef2" v-for="tag in item.tags" v-text="tag"></van-tag>
          </div>
        </div>
        <!-- 右边图片区域 -->
        <div class="content-right">
          <van-image
              :width="imgWidth"
              :height="imgHeight"
              fit="contain"
              :src="item.images"
          />
        </div>
      </div>
      <!-- 底部mark区域 -->
      <div class="mark" v-if="showMark">
        <van-space>
          <van-tag color="#0fc70f" text-color="#fff" v-text="item.mark + '条标注'"></van-tag>
          <i :class="item.originIcon||'iconfont icon-01_neirongguanli'"></i>
        </van-space>
      </div>
      <!-- 底部详情区域 -->
      <div class="bottom" v-if="showBottom">
        <div class="source multi-ellipsis--l1">
          <van-space>
            <i :class="item.originIcon||'iconfont icon-01_neirongguanli'"></i>
            <span v-text="item.origin"></span>
          </van-space>
        </div>
        <div class="index">
          <van-space>
            <i class="iconfont icon-wenjianjia"></i>
            <span v-text="index + 1 + '/' + content.length"></span>
          </van-space>
        </div>
      </div>
    </li>
  </ul>
</template>

<script setup>
// 作者：YCH
// 时间：2022年10月30日 17:17:44
import router from "@/router/index.js";
const handleClick = (item) => {
  console.log(router.currentRoute.value.path)
  if('/useGuide' != router.currentRoute.value.path){
    // 如果是收藏列表页面
    // router.push({ name: 'articleById', params: { id: id }}) // -> /article/123
    router.push({ path: `/article/${item.articleId}`, params: { id: item.articleId }}) // -> /article/123
  }else {
    // 如何使用页面
    console.log(item.title)
    router.push({ path: `/card/${item.articleId}?title=${item.articleTitle}`})
  }
};
const props = defineProps({
  // 页面标题
  title: {
    type: String,
    default: "",
  },
  titleLine: {
    type: Number,
    default: 2
  },
  // 是否展示标题颜色
  titleSpanBgColor:{
    type: String,
    default: "",
  },
  // 是否显示底部部件
  showMark: {
    type: Boolean,
    default: false,
  },
  // 是否显示底部部件
  showBottom: {
    type: Boolean,
    default: false,
  },
  // 是否显示底部标签
  showTags: {
    type: Boolean,
    default: false,
  },
  content: {
    type: Array,
    default: []
  },
  contentLine: {
    type: Number,
    default: 3
  },
  imgWidth: {
    type: String,
    default: '5rem'
  },
  imgHeight: {
    type: String,
    default: '5rem'
  }
});
</script>

<style lang="less" scoped>
.content {
  background-color: var(--card-background-color);
  border-radius: var(--card-border-radius);
  margin-bottom: var(--card-margin-bottom);
  .content-detail {
    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    .content-left {
      width: 80%;
      .content-title {
        font-weight: bold;
        font-family: var(--primary-font-family);
      }
      .content-text {
        font-size: 12px;
        color: var(--van-text-color-3);
        font-family: fangsong;
      }
      .van-tag{
        margin: 4px 4px 0;
      }
    }
  }
  .mark{
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 16px;
    .van-space{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  .bottom {
    display: flex;
    height: 30px;
    padding: 0 16px;
    background-color: #e7e7e7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    align-items: center;
    justify-content: space-between;
    .source{
      flex: 2;
    }
    .index{
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
    //.source{
    //  display: inline-block;
    //  white-space: nowrap;
    //  width: 100%;
    //  overflow: hidden;
    //  text-overflow:ellipsis;
    //}
  }
}
</style>
